<template>
<!--四点接触球   -->
    <div class="all">
     <a-row style="width: 100%;height: 100%">
         <a-col span="11" style="height: 100%">
             <div class="left">
                 <div style="width: 100%;height: 3%;background: #D7D7D7">输入参数</div>
                 <div style="width: 100%;height: 97%">
                     <div class="left_top">
                         <div style="height: 5%;width: 100%">基本参数</div>
                         <div style="height: 95%;width: 100%">
                             <div style="height: 5%;width: 100%;display: flex">
                             <div style="height: 100%;width: 10%;margin-left: 10%">
                               <label>载荷类型</label>
                             </div>
                             <div style="height: 100%;width: 25%">
                               <select v-model="form.load_type">
                                 <option value="1">极限载荷</option>
                                 <option value="2">疲劳载荷</option>
                               </select>
                             </div>
                             <div style="width: 50%;height: 100%">
                               <a-upload :showUploadList="false" :maxCount="1" :customRequest="customRequest" name="file">
                                 <button v-show="form.load_type==1">导入轴承极限载荷</button>
                               </a-upload>

                               <a-upload :showUploadList="false" :maxCount="1" :customRequest="customRequest" name="file">
                                 <button v-show="form.load_type==2">导入轴承疲劳载荷</button>
                               </a-upload>
                               <div class="tend">
                                 <span class="text">注：上传文件格式为.xls或.xlsx格式，其各列参数如表格所示(无需表头)</span>
                               </div>
                             </div>
                           </div>
                             <div style="height: 25%;width: 96%;position: relative;top: 4%;left: 2%">
                                 <div v-show="form.load_type==1" class="table">
                                     <tr class="title2">
                                         <th style="width: 10%">序号</th>
                                         <th>Fx(N)</th>
                                         <th>Fy(N)</th>
                                         <th>Fz(N)</th>
                                         <th>Mx(Nm)</th>
                                         <th>My(Nm)</th>
                                     </tr>
                                     <tr class="tbody" v-for="(item,index) in items" :key="index">
                                         <td>{{item[0]}}</td>
                                         <td>{{item[1]}}</td>
                                         <td>{{item[2]}}</td>
                                         <td>{{item[3]}}</td>
                                         <td>{{item[4]}}</td>
                                         <td>{{item[5]}}</td>
                                     </tr>
                                 </div>
                                 <div v-show="form.load_type==2" class="table">
                              <tr class="title1">
                                  <th>序号</th>
                                  <th>Fx(N)</th>
                                  <th>Fy(N)</th>
                                  <th>Fz(N)</th>
                                  <th>My(Nm)</th>
                                  <th>Mz(Nm)</th>
                                  <th>时间占比</th>
                                  <th>转速(rpm)</th>
                              </tr>
                              <tr class="tbody" v-for="(item,index) in items" :key="index">
                                  <td>{{item[0]}}</td>
                                  <td>{{item[1]}}</td>
                                  <td>{{item[2]}}</td>
                                  <td>{{item[3]}}</td>
                                  <td>{{item[4]}}</td>
                                  <td>{{item[5]}}</td>
                                  <td>{{item[6]}}</td>
                                  <td>{{item[7]}}</td>
                              </tr>
                             </div>
                             </div>
                             <div style="height: 65%;width: 100%;margin-top: 3%;display: flex">
                                 <div style="height: 100%;width: 40%;display: flex">
                                     <div style="height: 100%;width: 65%">
                                        <ul class="left_text">
                                            <li>布置形式</li>
                                            <li>轴承节圆直径(mm)</li>
                                            <li>滚动体直径(mm)</li>
                                            <li>滚动体个数</li>
                                          <li>内圈沟曲率半径系数(mm)</li>
                                          <li>外圈沟曲率半径系数(mm)</li>
                                           <li>名义接触角(°)</li>

                                            <li>两列滚动体中心间距(mm)</li>
                                            <li>轴向游隙(mm)</li>
                                            <li>轴向转速(mm)</li>
                                        </ul>
                                    </div>
                                     <div style="height: 100%;width: 35%">
                                         <ul class="left_input">
                                         <li>
                                           <select v-model="form.model_type">
                                             <option value ="1">"O“型</option>
                                             <option value ="2">"X"型</option>
                                           </select>
                                         </li>
                                         <li><input v-model="form.Dpw" type="text"></li>
                                         <li><input v-model="form.Dw" type="text"></li>
                                         <li><input v-model="form.Z" type="text"></li>
                                         <li><input v-model="form.fi" type="text"></li>
                                         <li><input v-model="form.fe" type="text"></li>
                                           <li><input v-model="form.contact_angle" type="text"></li>
                                           <li><input v-model="form.distance_ball" type="text"></li>
                                           <li><input v-model="form.axial_clearance" type="text"></li>
                                           <li><input v-model="form.speed" type="text"></li>
                                         </ul>
                                     </div>
                                 </div>
                                 <div style="height: 100%;width: 60%;display: flex">
                                     <div style="height: 100%;width: 50%">
                                         <ul class="right_text">
                                             <li>轴承外圈弹性模量(MPa)</li>
                                             <li>轴承外圈泊松比</li>
                                             <li>滚动体弹性模量(MPa)</li>
                                             <li>滚动体泊松比</li>
                                             <li>轴承内圈弹性模量(MPa)</li>
                                             <li>轴承内圈泊松比</li>
                                             <li>轴承额定动载荷(N)</li>

                                         </ul>
                                     </div>
                                     <div style="height: 100%;width: 28%">
                                         <ul class="right_input">
                                             <li><input v-model="form.E_e" type="text"></li>
                                             <li><input v-model="form.v_e" type="text"></li>
                                             <li><input v-model="form.E_b" type="text"></li>
                                             <li><input v-model="form.v_b" type="text"></li>
                                             <li><input v-model="form.E_i" type="text"></li>
                                             <li><input v-model="form.v_i" type="text"></li>
                                             <li><input :disabled="form.radiobutton1==2" v-model="form.C_input" type="text">
                                               <input v-model="form.radiobutton1" value="1" style="width: 12px;height: 12px;margin-left: 3%" type="radio">手动
                                             </li>
                                             <li><div style="text-align: right">
                                               <input v-model="form.radiobutton1" value="2" style="width: 12px;height: 12px" type="radio">自动</div>
                                             </li>

                                         </ul>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="left_bottom">
                         <div style="width: 100%;height: 5%">修正参数</div>
                         <div style="width: 100%;height: 95%;display: flex">
                             <div style="width: 45%;height: 100%;display: flex">
                                 <div style="width: 60%;height: 100%">
                                     <ul class="bottom_text">
                                         <li>轴承疲劳极限载荷(N)</li>
                                         <li ><span v-show="form.radiobutton2==2">系数f0</span></li>
                                       <li>可靠度(%)</li>
                                       <li>清洁度条件</li>
                                       <li  v-show="form.contamination_condition==2">污染系数</li>
                                       <li v-show="form.contamination_condition==1">润滑方式</li>
                                       <li v-show="form.contamination_condition==1">清洁度等级</li>

                                     </ul>

                                 </div>
                                 <div style="width: 34%;height: 100%">
                                     <ul class="bottom_input">
                                         <li><input v-model="form.Cu" :disabled="form.radiobutton2==2" type="text"><input v-model="form.radiobutton2" style="height: 12px;width: 10px" type="radio" value="1">手动</li>
                                         <li><div style="text-align: right">
                                           <input v-model="form.f0" v-show="form.radiobutton2==2" type="text">
                                           <input  v-model="form.radiobutton2" value="2" style="width: 12px;height: 12px" type="radio">自动</div>
                                         </li>
                                       <li>
                                         <select v-model="form.reliability" >
                                           <option value="1">90</option>
                                           <option value="2">95</option>
                                           <option value="3">96</option>
                                           <option value="4">97</option>
                                           <option value="5">98</option>
                                           <option value="6">99</option>
                                           <option value="7">99.2</option>
                                           <option value="8">99.4</option>
                                           <option value="9">99.6</option>
                                           <option value="10">99.8</option>
                                           <option value="11">99.9</option>
                                           <option value="12">99.92</option>
                                           <option value="13">99.94</option>
                                           <option value="14">99.95</option>
                                         </select>
                                       </li>
                                       <li>
                                         <select v-model="form.contamination_condition" style="width: 70%">
                                           <option value="1">润滑油纯净度按ISO4406已知</option>
                                           <option value="2">只大体知道清洁度等级</option>
                                         </select>
                                       </li>
                                       <li v-show="form.contamination_condition==2"><input v-model="form.e_C_s" type="text" ></li>
                                       <li v-show="form.contamination_condition==1" >
                                         <select v-model="form.lubricate_method" style="width: 70%">
                                           <option value="1">油润滑，在线过滤</option>
                                           <option value="2">油润滑，离线过滤或未过滤</option>
                                           <option value="3">脂润滑</option>
                                         </select>
                                       </li>
                                       <li v-show="form.contamination_condition==1">
                                         <select v-model="form.contamination_level" style="width: 70%">
                                           <option value="1">-/13/10,-/12/10,-/11/9,-/12/9</option>
                                           <option value="2">-/15/12,-/14/12,-/16/12,-/16/13</option>
                                           <option value="3">-/17/14,-/18/14,-/18/15,-/19/15</option>
                                           <option value="4">-/19/16,-/18/16,-/20/17,-21/17</option>
                                           <option value="5">-/21/18,-/21/19,-/22/19,-/23/19</option>
                                         </select>
                                       </li>


                                     </ul>
                                 </div>
                             </div>
                             <div style="width: 55%;height: 100%;display: flex">
                                 <div style="width: 45%;height: 100%">
                                     <ul class="bottom_text1">
                                       <li>润滑油40°C粘度(mm^2/s)</li>
                                       <li>润滑油100°C粘度(mm^2/s)</li>
                                       <li>润滑油工作温度(°C)</li>
                                       <li>是否添加挤压润滑剂</li>
                                     </ul>
                                 </div>
                                 <div style="width: 55%;height: 100%">
                                     <ul class="bottom_input1">
                                       <li><input v-model="form.v_40" type="text"></li>
                                       <li><input v-model="form.v_100" type="text"></li>
                                       <li><input v-model="form.oil_temperature" type="text"></li>
                                         <li>
                                             <select v-model="form.pp4">
                                                 <option value="1">是</option>
                                                 <option value="2">否</option>
                                             </select>
                                         </li>

                                     </ul>
                                 </div>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
         </a-col>
         <a-col span="13" style="height: 100%">
             <div class="right">
                 <div style="width: 100%;height: 3%;background: #D7D7D7">输出参数</div>
                 <div style="width: 100%;height: 97%">
                     <div class="right_top">
                         <div style="width: 100%;height: 5%">结果汇总</div>
                         <div style="width: 100%;height: 45%;position: relative">
                         <div v-show="form.load_type==1" style="width: 100%;height: 100%;display: flex;position: absolute;">
                             <div style="height:100%;width: 10%;text-align:center;padding-top: 2%;margin-left: 2%">寿命计算结果</div>
                                <div class="table1">
                                    <div style="width: 150%;height: 100%">
                                 <tr style="height: 20%;text-align: center;">
                                     <th style="width: 5%">序号</th>
                                     <th>可靠度修正系数a1</th>
                                     <th>寿命修正系数aISO</th>
                                     <th>L10寿命revs(hr)</th>
                                     <th>Lnm寿命revs(hr)</th>
                                     <th>Lnm寿命revs-NREL(hr)</th>
                                     <th>L10r寿命revs(hr)</th>
                                     <th>Lnmr寿命revs(N)</th>
                                     <th>Lnmr寿命revs-NREL</th>
                                 </tr>
                                      <tr style="text-align: center" v-for="(item,i) in res.result_life_spectrum" :key="i">
                                        <td v-for="(value,index) in item"  :key="index">{{value}}</td>
                                      </tr>
                                 </div>
                                </div>
                         </div>
                         <div v-show="form.load_type==2" style="width: 100%;height: 100%;display: flex;position: absolute;">
                             <div style="height:100%;width: 10%;text-align:center;padding-top: 5%;margin-left: 2%">寿命计算结果</div>
                             <div class="table1" style="overflow-x: hidden">
                                 <div style="width: 100%;height: 100%">
                                     <tr style="height: 20%;text-align: center">
                                         <th>L10寿命revs(hr)</th>
                                         <th>Lnm寿命revs(hr)</th>
                                         <th>Lnm寿命revs-NREL(hr)</th>
                                         <th>L10r寿命revs(hr)</th>
                                         <th>Lnmr寿命revs(hr)</th>
                                         <th>Lnmr寿命revs-NREL</th>
                                     </tr>
                                     <tr style="text-align: center" v-for="(item,i) in res.result_life_spectrum" :key="i">
                                         <td >{{item[3]}}</td>
                                         <td >{{item[4]}}</td>
                                         <td >{{item[5]}}</td>
                                         <td >{{item[6]}}</td>
                                         <td >{{item[7]}}</td>
                                         <td >{{item[8]}}</td>
                                     </tr>
                                 </div>
                             </div>
                         </div>
                        </div>
                         <div style="width: 100%;height: 50%;display: flex">
                             <div style="margin-left:1%;width: 48%;height: 100%;display: flex">
                                 <div style="padding-top: 10%;margin-left: 2%; width: 60%;text-align: center">内圈最大接触应力(MPa)</div>
                                 <div class="table1" style="overflow-x: hidden;height: 80%;margin-top: 3%">
                                     <div style="width: 100%;height: 100%">
                                         <tr style="height: 20%;text-align: center;">
                                             <th>序号</th>
                                             <th>应力(MPa)</th>
                                         </tr>
                                       <tr style="text-align: center" v-for="(item,i) in res.n_max_spectrum" :key="i">
                                         <td v-for="(value,index) in item"  :key="index">{{value}}</td>
                                       </tr>
                                     </div>
                                 </div>
                             </div>
                             <div style="margin-left:1%;width: 48%;height: 100%;display: flex">
                                 <div style="padding-top: 10%;margin-left: 2%; width: 60%;text-align: center">外圈最大接触应力(MPa)</div>
                                 <div class="table1" style="overflow-x: hidden;height: 80%;margin-top: 3%">
                                     <div style="width: 100%;height: 100%">
                                         <tr style="height: 20%;text-align: center;">
                                             <th>序号</th>
                                             <th>应力(MPa)</th>
                                         </tr>
                                       <tr style="text-align: center" v-for="(item,i) in res.w_max_spectrum" :key="i">
                                         <td v-for="(value,index) in item"  :key="index">{{value}}</td>
                                       </tr>
                                     </div>
                                 </div>
                             </div>
                         </div>
                     </div>
                     <div class="right_middle" style="height: 50%">
                         <div style="width: 100%;height: 5%">中间结果</div>
                         <ul style="width: 100%;height: 95%">
                             <li style="width: 100%;height: 20%;margin-top: 1%"><div style="margin-left: 3%;width: 100%;height: 100%;display: flex">
                                 <div style="width: 15%;height: 100%;text-align: center;margin-top: 2%">最大接触应力(MPa)</div>
                                 <div style="width: 85%;height: 100%">
                                     <div class="table1" style="overflow-x: hidden">
                                         <div style="width: 100%;height: 100%">
                                             <tr style="height: 20%;text-align: center">
                                                 <th>序号</th>
                                                 <th>滚动体序号</th>
                                               <th>内圈左</th>
                                               <th>内圈右</th>
                                               <th>外圈左</th>
                                               <th>外圈右</th>
                                             </tr>

                                           <tr style="text-align: center" v-for="(item,i) in res.stress_all_spectrum" :key="i">
                                             <td v-for="(value,index) in item" v-show="index<6" :key="index">{{value}}</td>
                                           </tr>
                                         </div>
                                     </div>
                                 </div>
                             </div></li>
                             <li style="width: 100%;height: 20%;margin-top: 1%"><div style="margin-left: 3%;width: 100%;height: 100%;display: flex">
                                 <div style="width: 15%;height: 100%;text-align: center;margin-top: 2%">接触半宽(mm)</div>
                                 <div style="width: 85%;height: 100%">
                                     <div class="table1" style="overflow-x: hidden">
                                         <div style="width: 100%;height: 100%">
                                             <tr style="height: 20%;text-align: center">
                                                 <th>序号</th>
                                                 <th>滚动体序号</th>
                                                 <th>内圈左</th>
                                                 <th>内圈右</th>
                                                 <th>外圈左</th>
                                                 <th>外圈右</th>
                                             </tr>
                                           <tr style="text-align: center" v-for="(item,i) in res.semi_minor_all_spectrum" :key="i">
                                             <td v-for="(value,index) in item" v-show="index<6" :key="index">{{value}}</td>
                                           </tr>
                                         </div>
                                     </div>
                                 </div>
                             </div></li>
                             <li style="width: 100%;height: 20%;margin-top: 1%"><div style="margin-left: 3%;width: 100%;height: 100%;display: flex">
                                 <div style="width: 15%;height: 100%;text-align: center;margin-top: 2%">滚动体法向载荷(N)</div>
                                 <div style="width: 75%;height: 100%">
                                     <div class="table1" style="overflow-x: hidden">
                                         <div style="width:100%;height: 100%">
                                             <tr style="height: 10%;text-align: center">
                                                 <th>序号</th>
                                                 <th>滚动体序号</th>
                                                 <th>左(N)</th>
                                                 <th>右(N)</th>
                                             </tr>
                                           <tr style="text-align: center" v-for="(item,i) in res.Qj_all_spectrum" :key="i">
                                             <td v-for="(value,index) in item" v-show="index<4" :key="index">{{value}}</td>
                                           </tr>
                                         </div>
                                     </div>
                                 </div>
                             </div></li>

                         </ul>
                     </div>
                     <div style="width: 100%;height: 10%"><button style="width: 10%;height: 50%;margin-top: 1%;margin-left: 2%" @click="submit">计算</button></div>
                 </div>
             </div>
         </a-col>
     </a-row>
    </div>
</template>

<script>
import {filetext, firedelete, module_four_point_contact_ballbearing_cal_last} from "@/api/file";

export default {
        name: "module_four_point_contact_ballbearing_cal_last",
  created () {
    document.title = '四点接触球轴承滚动体受载与寿命计算' //模块中文名
    this.$store.state.file.key = 30 //设置key为自己的页面编号
  },
        data(){
            return{
              form2:{
                uuids:[]
              },
               items:[[]],
                form:this.$store.state.file.dataList[30],
                res:{
                  //滚动体法向载荷
                  Qj_all_spectrum:[[]],
                  //接触半宽
                  semi_minor_all_spectrum:[ []],
                  //最大接触应力
                  stress_all_spectrum:[[]],
                  life_fatigue_total:[[]],
                  //外圈最大接触应力
                  w_max_spectrum: [[]],
                  //内圈最大接触应力
                  n_max_spectrum:  [[]],
                  //寿命计算结果
                  result_life_spectrum:[[]],
                  C: [[
                    2156270.8
                  ]]
                }
            };
        },
  mounted(){
    //绑定页面退出事件
    window.onbeforeunload= (e)=>{
      e = e || window.event;
      if (e) {
        e.returnValue = '关闭提示';
      }
      this.delete()//调用自己的方法
      // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
      return '关闭提示';
    };
  },
      methods:{
        //删除载荷谱
        async delete(){
          this.form2.uuids=this.form2.uuids.toString();//将载荷谱文件数组转成字符串
          await firedelete(this.form2).then(res => {
            console.log(res);
          })
        },
        customRequest(data)
        {
          const formData = new FormData()
          formData.append('fileName', data.file)
          filetext(formData)
              .then(res => {//这里需要用箭头函数，如果不用箭头函数里面的this就不是外面那个this
                console.log(res)
                this.items=res.data.filedata;
                this.form2.uuids.push(res.data.uuid);
              })
              .catch(error => {
                console.log(error);
              });
        },
          submit(){
            module_four_point_contact_ballbearing_cal_last(this.form)
                .then(res => {
                  console.log(res);
                  this.res.result_life_spectrum=res.result_life_spectrum;
                  this.res.n_max_spectrum=res.n_max_spectrum;
                  this.res.w_max_spectrum=res.w_max_spectrum;
                  this.res.life_fatigue_total=res.life_fatigue_total;
                  this.res.stress_all_spectrum=res.stress_all_spectrum;
                  this.res.semi_minor_all_spectrum=res.semi_minor_all_spectrum;
                  this.res.C=res.C;
                  this.res.Qj_all_spectrum=res.Qj_all_spectrum;
                })
                .catch(error => {
                  console.log(error);
                });
          }
      }
    }
</script>

<style scoped>
li{
  list-style: none;
}
.all
{
    width: 100%;
    height: 100%;
}
.left,.right
{
    width: 96%;
    height: 96%;
    margin-top: 2%;
    margin-left: 2%;
    box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
}
.left_top
{
    height: 69%;
    width: 98%;
    margin-left: 1%;
    margin-top: 1%;
    padding: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
}
.title1,.title2
{
    background: #D7D7D7;
    width: 100%;
    height: 10%;
    text-align: center;
}
.title1 th
{
    width: 10%;
    border: 1px solid grey;
}
.title2 th
{
    width: 21%;
    border: 1px solid grey;
}
.table
{
    height: 100%;
    width: 100%;
    background: #D7D7D7;
    border: 1px solid grey;
    position: absolute;
    overflow-y: scroll;
}
.tbody
{
    text-align: center;
}

tr:nth-child(odd)  {
    background-color:#D7D7D7;
}

tr:nth-child(even){
    background-color:#f1f1f1;
}
.left_text
{
    width: 100%;
    height: 100%;
    text-align: right;
}
.left_text li
{
    width: 100%;
    height: 10%;
}
.left_input
{
    width: 100%;
    height: 100%;
    margin-left: 10%;
}
.left_input li
{
    width: 100%;
    height: 10%;
}
.left_input input
{
    width: 70%;
    height: 80%;
}
.right_text
{
    width: 100%;
    height: 100%;
}
.right_text li
{
    text-align: right;
    height: 8.3%;
    width: 100%;
}
.right_input
{
    width: 100%;
    height: 100%;
    margin-left: 8%;
}
.right_input li
{
    height: 8.3%;
    width: 100%;
}
.right_input input
{
    width: 60%;
    height: 96%;
}
.left_bottom
{
    height: 28%;
    width: 98%;
    margin-left: 1%;
    margin-top: 1%;
    padding: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
}
.bottom_text
{
    width: 100%;
    height: 100%;
    text-align: right;
    margin-top: 5%;
}
.bottom_text li,.bottom_input li
{
    height: 15%;
    width: 100%;
}
.bottom_input
{
    height: 100%;
    width: 100%;
    margin-top:9%;
    margin-left: 5%;
}
.bottom_input input
{
    height: 90%;
    width: 62%;
}
.bottom_text1
{
    width: 100%;
    height: 100%;
    text-align: right;
}
.bottom_text1 li
{
    width: 100%;
    height: 16%;
}
.bottom_input1
{
    width: 100%;
    height: 100%;
    margin-left: 5%;
}
.bottom_input1 li
{
    width: 100%;
    height: 16%;
}
.bottom_input1 select,.bottom_input1 input
{
    height: 75%;
    width: 34%;
}
.right
{
    width: 96%;
    height: 96.3%;
    margin-top: 1.7%;
    margin-left: 2%;
    box-shadow: 0px 2px 8px rgba(213, 213, 213, 0.349019607843137);
}
.right_top,.right_middle
{
    height: 40%;
    width: 98%;
    padding: 2px;
    border-width: 2px;
    border-style: solid;
    border-color: rgba(121, 121, 121, 1);
    border-radius: 8px;
    margin-top: 1%;
    margin-left: 1%;
}
.table1
{
    height: 90%;
    width: 87%;
    overflow: scroll;
}
.table1 th
{
    width: 10%;
}
.table1,th,tr,td
{
    border: 1px solid grey;
}
</style>
